import React from 'react';
import { Divider } from 'antd';
import { DemoPureComponet } from './DemoPureComponet';

const PureComponent = () => {
  return (
    <div>
      <Divider />
      <h4>
        第二条 PureComponent <br />
        纯组件：纯组件会对组件的输入数据进行浅层比较，如果当输入和上次输入数据相同，组件不会重新渲染
        <br />
        浅层比较：比较引用数据类型仔内存中的引用地址是否相同，比较基本数据类型的值是否相同
        <br />
        如何实现纯组件：类组件呢继承PureComponent类，函数组件使用memo方法
        <br />
        为什么不直接进行diff操作，而是要先进行浅层比较（因为浅层比较和进行diff比较操作相比，浅层比较将消耗更少的性能）。
        <br />
        diff操作会重新遍历整颗virtualDOM树，而浅层比较只操作当前组件的state和props
      </h4>
      <DemoPureComponet />
      <Divider />
    </div>
  );
};

export default PureComponent;
